<div>
  <ul id="template-tabs">
    <li class="nav-item">
      <a class="nav-link active" data-i18n="size.tab.home" data-toggle="tab" href="#sieve-widget-size" role="tab"></a>
    </li>
    <li class="nav-item">
      <a class="nav-link" data-i18n="size.tab.help" data-toggle="tab" href="#sieve-widget-help" role="tab"></a>
    </li>
  </ul>

  <div id="template-content">
    <div class="tab-content m-2">
      <div class="tab-pane fade show active" id="sieve-widget-size" role="tabpanel">

        <div class="mb-3">
          <label data-i18n="size.description"></label>

          <div class="form-check">
            <input type="radio" id="customRadio1" name="over" value="test/size/operator/over" class="form-check-input" />
            <label class="form-check-label" data-i18n="size.larger" for="customRadio1"></label>
          </div>
          <div class="form-check">
            <input type="radio" id="customRadio2" name="over" value="test/size/operator/under" class="form-check-input" />
            <label class="form-check-label" data-i18n="size.smaller" for="customRadio2"></label>
          </div>
        </div>

        <div class="mb-3" data-i18n="size.compare"></div>

        <div id="sivSizeInput"> </div>

      </div>
      <div class="tab-pane fade" id="sieve-widget-help" role="tabpanel" style="white-space: pre-line">
        <span class="form-text" data-i18n="size.help"></span>
        <div data-i18n="size.help.warning" class="alert alert-info" role="alert"></div>
      </div>
    </div>
  </div>
</div>